import { ReactElement, useEffect, useState, useRef } from 'react'
import { Space, message, Button } from 'antd'
import style from './index.module.less'
import ItemList from './components/itemList'
import { awaitWrap } from '@src/assets/js/tool'
import { getPerformanceRequest } from './ajax'
import { PerformanceSchema, WorkPerformanceSchema } from '@src/components/schema/performanceSchema'
import classNames from 'classnames'
import Accepter from './components/accepter'
import PersonList, { PersonRef } from './components/personList'
import { throttle } from 'lodash'

// 初始化审核数据
async function initPerformance (id: string, setPerformance: (v: PerformanceSchema) => void): Promise<void> {
  const hide = message.loading('加载中')
  const [e, d] = await awaitWrap(getPerformanceRequest(id))
  hide()
  if (e === null && d !== null) {
    setPerformance(d)
  }
}

interface Props {
  meta: {
    id: string
  }
}

function Main ({ meta }: Props): ReactElement {
  const personRef = useRef<PersonRef>(null)
  const [performance, setPerformance] = useState<PerformanceSchema | null>(null)
  const [current, setCurrent] = useState<WorkPerformanceSchema | null>(null)
  const [boardType, setBoardType] = useState('非办案绩效考核')
  const [fixed, setFixed] = useState(false)
  function initData (): void {
    if (typeof meta.id === 'string') {
      initPerformance(meta.id, setPerformance).catch(e => console.error(e))
    }
  }
  useEffect(() => {
    initData()
  }, [meta.id])
  useEffect(() => {
    initData()
  }, [current, meta])
  useEffect(() => {
    function scrollHandle (): void {
      const top = window.document.documentElement.scrollTop
      setFixed(top > 100)
    }
    const fn = throttle(scrollHandle, 100)
    fn()
    document.addEventListener('scroll', fn)
    return () => {
      document.removeEventListener('scroll', fn)
    }
  }, [])
  return (
    <div className={classNames(style.container, { [style.fixed]: fixed })}>
      <div className={style['left-container']}>
        <PersonList ref={personRef} current={current} setCurrent={setCurrent} performanceid={meta.id} />
      </div>
      <div className={style['right-container']}>
        <div className={style['right-inner']}>
          <div className={style['right-title-line']}>
            <span className={style['right-title']}>{ current !== null ? current.name : '无' }</span>
            <Space className={style['board-btn-block']} size={24}>
              <a className={classNames(style['board-btn'], { [style.active]: boardType === '非办案绩效考核' })} onClick={() => setBoardType('非办案绩效考核')}>非办案绩效考核</a>
              <a className={classNames(style['board-btn'], { [style.active]: boardType === '撤裁与受理秘书工作表现' })} onClick={() => setBoardType('撤裁与受理秘书工作表现')}>撤裁与受理秘书工作表现</a>
            </Space>
          </div>
          <div className={classNames(style['right-content-block'], { [style.active]: boardType === '非办案绩效考核' })}>
            <ItemList workType='重点工作' work={current} refreshData={() => personRef.current?.refreshData()} />
            <ItemList workType='常规工作' work={current} refreshData={() => personRef.current?.refreshData()} />
            <ItemList workType='临时工作' work={current} refreshData={() => personRef.current?.refreshData()} />
            <div className={style['result-line']}>
              <span className={style['result-line-title']}>非办案绩效考核小计</span>
              <span className={style['result-line-value']}>{current !== null && typeof current.score === 'number' ? current.score.toFixed(2) : 0}分</span>
            </div>
          </div>
          <div className={classNames(style['right-content-block'], { [style.active]: boardType === '撤裁与受理秘书工作表现' })}>
            <Accepter work={current} refreshFn={() => personRef.current?.refreshData()} performanceid={meta.id} />
          </div>
        </div>
      </div>
    </div>
  )
}

export default Main
